.hamburger{background:transparent;border:none;display:block;height:32px;margin-left:15px;position:fixed;top:20px;width:32px;z-index:999;right:0}
.hamburger:hover{outline:none}
.hamburger:focus{outline:none}
.hamburger:active{outline:none}
.hamburger.is-closed:before{-webkit-transform:translate3d(0,0,0);-webkit-transition:all 0.35s ease-in-out;color:#ffffff;content:'';display:block;font-size:14px;line-height:32px;opacity:0;text-align:center;width:100px}
.hamburger.is-closed:hover before{-webkit-transform:translate3d(-100px,0,0);-webkit-transition:all 0.35s ease-in-out;display:block;opacity:1}
.hamburger.is-closed:hover .hamb-top{-webkit-transition:all 0.35s ease-in-out;top:0}
.hamburger.is-closed:hover .hamb-bottom{-webkit-transition:all 0.35s ease-in-out;bottom:0}
.hamburger.is-closed .hamb-top{-webkit-transition:all 0.35s ease-in-out;background-color:#DDDDDD;top:5px}
.hamburger.is-closed .hamb-middle{background-color:#DDDDDD;margin-top:-2px;top:50%}
.hamburger.is-closed .hamb-bottom{-webkit-transition:all 0.35s ease-in-out;background-color:#DDDDDD;bottom:5px}
.hamburger.is-closed .hamb-top,.hamburger.is-closed .hamb-middle,.hamburger.is-closed .hamb-bottom,.hamburger.is-open .hamb-top,.hamburger.is-open .hamb-middle,.hamburger.is-open .hamb-bottom{height:4px;left:0;position:absolute;width:100%}
.hamburger.is-open .hamb-top{-webkit-transform:rotate(45deg);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.73,1,0.28,0.08);background-color:#ddd;margin-top:-2px;top:50%}
.hamburger.is-open .hamb-middle{background-color:#ddd;display:none}
.hamburger.is-open .hamb-bottom{-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.73,1,0.28,0.08);background-color:#ddd;margin-top:-2px;top:50%}
.hamburger.is-open:before{-webkit-transform:translate3d(0,0,0);-webkit-transition:all 0.35s ease-in-out;color:#ddd;content:'';display:block;font-size:14px;line-height:32px;opacity:0;text-align:center;width:100px}
.hamburger.is-open:hover before{-webkit-transform:translate3d(-100px,0,0);-webkit-transition:all 0.35s ease-in-out;display:block;opacity:1}
ul,li,a{list-style:none;text-decoration:none}
ul li a{font-size:16px;color:#333}
body{width:100%;height:100%;position:relative}
.sidebar-nav{width:100%;height:100%;position:fixed;top:0;right:-100%;background-color:#eee;transition:all .3s;box-sizing:border-box}
.sidebar-nav-open{right:0}
.sidebar-nav .sidebar-brand>a{font-size:18px}
.sidebar-nav .sidebar-brand .xl{display:none}
.sidebar-nav .sidebar-brand a{display:flex;display:-webkit-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-start;justify-content:flex-start;margin-bottom:20px}
.sidebar-nav .sidebar-brand a .sj{display:block;width:6px;height:6px;border-right:1px solid #DDDDDD;border-top:1px solid #DDDDDD;transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-left:10px}
.sidebar-nav .sidebar-brand a .sjrotate{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.activ{color:#f00}
.activ02{color:pink}